<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>succession.info</title>

    <link rel="stylesheet" href="main.css">

    <script type="text/montage-serialization">
    {
        "owner": {
            "values": {
                "element": {"#": "Main"},
                "succession1": {"@": "succession1"}
            },
            "listeners": [
                {
                    "type": "action",
                    "listener": {"@": "owner"}
                }
            ]
        },
        "succession1": {
            "prototype": "montage/ui/succession.reel",
            "values": {
                "element": {"#": "succession1"}
            },
            "listeners": [
                {
                    "type": "buildInEnd",
                    "listener": {"@": "owner"}
                },
                {
                    "type": "buildOutEnd",
                    "listener": {"@": "owner"}
                }
            ]
        },
        "succession1DefaultContent": {
            "prototype": "ui/foo.reel",
            "values": {
                "element": {"#": "succession1DefaultContent"}
            }
        },
        "push": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "push"}
            }
        },
        "pushx5": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "pushx5"}
            }
        },
        "pop": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "pop"}
            }
        },
        "popx5": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "popx5"}
            }
        },
        "contentComponent": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "contentComponent"}
            }
        },
        "contentNull": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "contentNull"}
            }
        },
        "multiOp": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "multiOp"}
            }
        },
        "toggleOverflow": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "toggleOverflow"}
            }
        },
        "setSuccessionBuildInOut": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "setSuccessionBuildInOut"}
            }
        },
        "clearSuccessionBuildInOut": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "clearSuccessionBuildInOut"}
            }
        },
        "disableSuccessionBuildInOut": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "disableSuccessionBuildInOut"}
            }
        },


        "stack": {
            "prototype": "montage/ui/repetition.reel",
            "values": {
                "element": {"#": "stack"},
                "content": {"<-": "@succession1.history.reversed()"}
            }
        },
        "lastBuildInComponentIdentifier": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "lastBuildInComponentIdentifier"},
                "value": {"<-": "@owner.lastBuildInComponentIdentifier"}
            }
        },
        "lastBuildOutComponentIdentifier": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "lastBuildOutComponentIdentifier"},
                "value": {"<-": "@owner.lastBuildOutComponentIdentifier"}
            }
        },
        "buildInOverride": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "buildInOverride"},
                "value": {"<-": "@succession1.contentBuildInCssClass || 'none'"}
            }
        },
        "buildOutOverride": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "buildOutOverride"},
                "value": {"<-": "@succession1.contentBuildOutCssClass || 'none'"}
            }
        },
        "displayTitle": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "displayTitle"},
                "value": {"<-": "@stack:iteration.object.title ?? 'N/A'"}
            }
        },
        "animation": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "animation"},
                "value": {"<-": "@stack:iteration.object.buildInCssClass + ' ' + @stack:iteration.object.buildInTransitionCssClass + ' ' + @stack:iteration.object.buildOutCssClass"}
            }
        },
        "animationOverride": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "animationOverride"},
                "value": {"<-": "@stack:iteration.object.buildInCssClassOverride + ' ' + @stack:iteration.object.buildInTransitionCssClassOverride + ' ' + @stack:iteration.object.buildOutCssClassOverride"}
            }
        },


        "select": {
            "prototype": "montage/ui/select.reel",
            "values": {
                "element": {"#": "select"},
                "content": [
                    {"value": "Foo"},
                    {"value": "Bar"}
                ],
                "value": {"value": "Foo"}
            }
        },
        "SubstitutionMultiOp": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "SubstitutionMultiOp"}
            }
        },
        "substitution": {
            "prototype": "montage/ui/substitution.reel",
            "values": {
                "element": {"#": "substitution"},
                "switchValue": {
                    "<->": "@select.value.label"
                }
            }
        },
        "FooForSubstitution": {
            "prototype": "ui/foo.reel",
            "values": {
                "element": {"#": "FooForSubstitution"}
            }
        },
        "BarForSubstitution": {
            "prototype": "ui/bar.reel",
            "values": {
                "element": {"#": "BarForSubstitution"}
            }
        },


        "detach": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "detach"}
            }
        },
        "Bar2": {
            "prototype": "ui/bar.reel",
            "values": {
                "element": {"#": "Bar2"}
            }
        },
        "text": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "text"},
                "value": "Hello World.",
                "buildInCssClass": "transition-build-in",
                "buildInTransitionCssClass": "transition",
                "buildOutCssClass": "transition-build-out"
            }
        },

        "Slot": {
            "prototype": "montage/ui/slot.reel",
            "values": {
                "element": {"#": "Slot"},
                "content": {"@": "Bar3"},
                "buildInCssClass": "slideInDown"
            }
        },
        "Bar3": {
            "prototype": "ui/bar.reel",
            "values": {
                "element": {"#": "Bar3"},
                "buildInCssClass": null,
                "buildInTransitionCssClass": null
            }
        },


        "Container": {
            "prototype": "montage/ui/component[Component]",
            "values": {
                "element": {"#": "Container"},
                "hasTemplate": false
            }
        },
        "innerText": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "innerText"},
                "value": "Text Inside Empty Component"
            }
        },

        "conditionToggle": {
            "prototype": "montage/ui/button.reel",
            "values": {
                "element": {"#": "conditionToggle"}
            }
        },
        "condition": {
            "prototype": "montage/ui/condition.reel",
            "values": {
                "element": {"#": "condition"},
                "condition": true
            }
        },
        "baz": {
            "prototype": "ui/baz.reel",
            "values": {
                "element": {"#": "baz"}
            }
        }
    }
    </script>
</head>
<body>
    <div data-montage-id="Main" class="main">
        <button data-montage-id="detach">Detach from Component tree</button>

        <h2>Stand-alone components declared in serialization</h2>
        <div data-montage-id="Bar2" style="position: static;"></div>
        <h3 data-montage-id="text"></h3>

        <h2>domContent Test w/o Slot</h2>
        <div data-montage-id="Container" style="border: 1px blue solid; height: 50px;"></div>
        <h3 data-montage-id="innerText"></h3>

        <h2>Nested animating components with inner's buildIn disabled</h2>
        <div class="wrapper">
            <div data-montage-id="Slot" class="slot wrapper">
                <div data-montage-id="Bar3"
                     style="background: darkblue; width: 90%; height: 90%; opacity: 0.5; position: static;">
                </div>
            </div>
        </div>

        <h2>Inside Succession with overridden animation</h2>
        <br>
        <div>
            <button data-montage-id="push">Push</button>
            <button data-montage-id="pushx5">Push x5</button>
            <button data-montage-id="pop">Pop</button>
            <button data-montage-id="popx5">Pop x5</button>
            <button data-montage-id="contentComponent">Set content to component</button>
            <button data-montage-id="contentNull">Set content to null</button>
            <button data-montage-id="multiOp">push x10 pop x5</button>
        </div>
        <br/>
        <div>
            <button data-montage-id="toggleOverflow">Toggle Container Overflow</button>
            <button data-montage-id="setSuccessionBuildInOut">Set Succession builds to CSS animation</button>
            <button data-montage-id="clearSuccessionBuildInOut">Clear builds (undefined)</button>
            <button data-montage-id="disableSuccessionBuildInOut">Disable builds (null)</button>
        </div>

        <div class="wrapper">
            <div data-montage-id="succession1" class="succession container overflow-hidden">
                <div data-montage-id="succession1DefaultContent" data-arg="content"></div>
            </div>
            <div class="stack">
                Build-in Override: <code data-montage-id="buildInOverride"></code>
                <br/>
                Build-out Override: <code data-montage-id="buildOutOverride"></code>
                <br/>
                Heard from event:
                <br>
                Last component built-in: <code data-montage-id="lastBuildInComponentIdentifier"></code>
                <br/>
                Last component built-out: <code data-montage-id="lastBuildOutComponentIdentifier"></code>

                <h3>The stack</h3>
                <ul data-montage-id="stack">
                    <li>
                        <div>
                            <span data-montage-id="displayTitle"></span>
                            <br>
                            <span data-montage-id="animation"></span>
                            <br>
                            <span data-montage-id="animationOverride"></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <h2>Inside Substitution</h2>
        <select data-montage-id="select"></select>
        <button data-montage-id="SubstitutionMultiOp">Switch 3 times between 2 items in 500ms</button>
        <div class="wrapper">
            <div data-montage-id="substitution" class="container overflow-hidden">
                <div data-montage-id="FooForSubstitution" data-arg="Foo"></div>
                <div data-montage-id="BarForSubstitution" data-arg="Bar"></div>
            </div>
        </div>

        <h2>Condition, CSS transition, access getComputedStyle properties in willDraw</h2>
        <button data-montage-id="conditionToggle">Toggle</button>
        <div class="wrapper">
            <div class="container overflow-hidden">
                <div data-montage-id="condition">
                    <div data-montage-id="baz"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
